<template>
    <div class="report">
        <div class="report-left">
            <div class="header">判别分析报告</div>
            <div class="info-card">
                <el-descriptions title="申请人基本信息" direction="horizontal" :column="1" size="large" border>
                    <el-descriptions-item label="姓名">{{ data.name }}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{ data.sex }}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{ data.age }}</el-descriptions-item>
                    <el-descriptions-item label="教育水平">{{ data.educational }}</el-descriptions-item>
                    <el-descriptions-item label="婚姻状况">{{ data.maritalStatus }}</el-descriptions-item>
                </el-descriptions>

                <el-descriptions title="行为数据（客户端）" direction="horizontal" :column="1" size="large" border>
                    <el-descriptions-item label="申请总时长">{{ data.applicaitonTime }}<span class="annotation">
                            (分位{{ data.applicaitonTimeNum }}%)</span></el-descriptions-item>
                    <el-descriptions-item label="某一页面停留时长">{{ data.stopTime }}<span class="annotation">
                            (分位数{{ data.stopTimeNum }}%)</span></el-descriptions-item>
                    <el-descriptions-item label="页面滑动速度">{{ data.pageSpeed }}<span class="annotation">
                            (分位数{{ data.pageSpeedNum }}%)</span></el-descriptions-item>
                    <el-descriptions-item label="页面跳出次数">{{ data.pageJumpTimes }}<span class="annotation">
                            (分位数{{ data.pageJumpTimesNum }}%)</span></el-descriptions-item>
                </el-descriptions>

                <el-descriptions title="产品信息" direction="horizontal" :column="1" size="large" border>
                    <el-descriptions-item label="本市申请">{{ data.localtion }}</el-descriptions-item>
                    <el-descriptions-item label="申请金额">{{ data.applyMoney }}</el-descriptions-item>
                    <el-descriptions-item label="首付比例">{{ data.paymentRatio }}</el-descriptions-item>
                    <el-descriptions-item label="期数">{{ data.period }}</el-descriptions-item>
                </el-descriptions>

                <el-descriptions title="申请车辆" direction="horizontal" :column="1" size="large" border>
                    <el-descriptions-item label="车型">{{ data.carModel }}</el-descriptions-item>
                    <el-descriptions-item label="车辆类型">{{ data.carType }}</el-descriptions-item>
                    <el-descriptions-item label="车辆价格">{{ data.carPrice }}</el-descriptions-item>
                    <el-descriptions-item label="车身大小">{{ data.carSize }}</el-descriptions-item>
                </el-descriptions>
            </div>

        </div>
        <div class="report-right">
            <div class="header">判别分析结果</div>
            <div class="echarts-table">
                <el-image style="width: 610px ;height: 540px" :src="data.image" :fit="fit" />
            </div>
        </div>
    </div>

</template>
<script setup>
import image1 from "../assets/20241027191633.png"
import image2 from "../assets/20241027191641.png"
import image3 from "../assets/20241027191649.png"
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'
const router = useRoute()
const query = router.query
const allData = ref([
    {
        "period": "60期",
        "orderNo": "B001",
        "educational": "本科",
        "carPrice": "18万元",
        "paymentRatio": "60%",
        "applyMoney": "72000.00元",
        "sex": "男",
        "localtion": "否",
        "carSize": "中型车",
        "carType": "轿车",
        "name": "李明辉",
        "age": "21",
        "maritalStatus": "未婚",
        "carModel": "本田雅阁",
        "applicaitonTime": "5分10秒",
        "applicaitonTimeNum": 99.5,
        "stopTime": "1分10秒",
        "stopTimeNum": 89.5,
        "pageSpeed": "25m/s",
        "pageSpeedNum": 89.5,
        "pageJumpTimes": "0",
        "pageJumpTimesNum": 2.5,
        "image": image1
    },
    {
        "period": "60期",
        "orderNo": "B002",
        "educational": "研究生以上",
        "carPrice": "20万元",
        "paymentRatio": "36%",
        "applyMoney": "128000.00元",
        "sex": "女",
        "localtion": "是",
        "carSize": "中型车",
        "carType": "轿车",
        "name": "张婉婷",
        "age": "23",
        "maritalStatus": "未婚",
        "carModel": "丰田凯美瑞",
        "applicaitonTime": "6分10秒",
        "applicaitonTimeNum": 99.7,
        "stopTime": "1分17秒",
        "stopTimeNum": 89.5,
        "pageSpeed": "25m/s",
        "pageSpeedNum": 89.5,
        "pageJumpTimes": "0",
        "pageJumpTimesNum": 2.5,
        "image": image2
    },
    {
        "period": "60期",
        "orderNo": "B003",
        "educational": "中专及高中",
        "carPrice": "35万元",
        "paymentRatio": "30%",
        "applyMoney": "245000.00元",
        "sex": "男",
        "localtion": "是",
        "carSize": "紧凑型SUV",
        "carType": "SUV",
        "name": "王志强",
        "age": "29",
        "maritalStatus": "离异",
        "carModel": "宝马X1",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image3
    },
    {
        "period": "60期",
        "orderNo": "B004",
        "educational": "初中及以下",
        "carPrice": "30万元",
        "paymentRatio": "19%",
        "applyMoney": "243000.00元",
        "sex": "女",
        "localtion": "是",
        "carSize": "中型车",
        "carType": "轿车",
        "name": "刘晓燕",
        "age": "31",
        "maritalStatus": "丧偶",
        "carModel": "奥迪A4L",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image1
    },
    {
        "period": "60期",
        "orderNo": "B005",
        "educational": "大专",
        "carPrice": "40万元",
        "paymentRatio": "29%",
        "applyMoney": "284000.00元",
        "sex": "男",
        "localtion": "否",
        "carSize": "中型车",
        "carType": "轿车",
        "name": "陈思远",
        "age": "27",
        "maritalStatus": "已婚",
        "carModel": "奔驰C级",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image2
    },
    {
        "period": "60期",
        "orderNo": "B006",
        "educational": "本科",
        "carPrice": "50万元",
        "paymentRatio": "46%",
        "applyMoney": "270000.00元",
        "sex": "男",
        "localtion": "是",
        "carSize": "中型SUV",
        "carType": "SUV",
        "name": "杨乐乐",
        "age": "37",
        "maritalStatus": "已婚",
        "carModel": "路虎发现神行",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image3
    },
    {
        "period": "60期",
        "orderNo": "B007",
        "educational": "研究生以上",
        "carPrice": "28万元",
        "paymentRatio": "42%",
        "applyMoney": "162400.00元",
        "sex": "女",
        "localtion": "是",
        "carSize": "紧凑型车",
        "carType": "轿车（电动车）",
        "name": "赵梓轩",
        "age": "30",
        "maritalStatus": "已婚",
        "carModel": "特斯拉Model 3",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image1
    },
    {
        "period": "60期",
        "orderNo": "B008",
        "educational": "初中及以下",
        "carPrice": "12万元",
        "paymentRatio": "21%",
        "applyMoney": "94800.00元",
        "sex": "女",
        "localtion": "是",
        "carSize": "紧凑型车",
        "carType": "轿车",
        "name": "黄雅静",
        "age": "30",
        "maritalStatus": "已婚",
        "carModel": "比亚迪秦Pro",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image2
    },
    {
        "period": "60期",
        "orderNo": "B009",
        "educational": "中专及高中",
        "carPrice": "25万元",
        "paymentRatio": "68%",
        "applyMoney": "80000.00元",
        "sex": "男",
        "localtion": "否",
        "carSize": "中型车",
        "carType": "轿车",
        "name": "周俊杰",
        "age": "26",
        "maritalStatus": "已婚",
        "carModel": "大众帕萨特",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image3
    },
    {
        "period": "60期",
        "orderNo": "B010",
        "educational": "大专",
        "carPrice": "70万元",
        "paymentRatio": "37%",
        "applyMoney": "441000.00元",
        "sex": "女",
        "localtion": "是",
        "carSize": "中大型SUV",
        "carType": "SUV",
        "name": "吴梦琪",
        "age": "46",
        "maritalStatus": "已婚",
        "carModel": "宝马X5",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image1
    },
    {
        "period": "60期",
        "orderNo": "B011",
        "educational": "本科",
        "carPrice": "50万元",
        "paymentRatio": "51%",
        "applyMoney": "245000.00元",
        "sex": "男",
        "localtion": "否",
        "carSize": "中大型车",
        "carType": "轿车",
        "name": "徐浩然",
        "age": "49",
        "maritalStatus": "已婚",
        "carModel": "奔驰E级",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image2
    },
    {
        "period": "60期",
        "orderNo": "B012",
        "educational": "中专及高中",
        "carPrice": "45万元",
        "paymentRatio": "22%",
        "applyMoney": "351000.00元",
        "sex": "女",
        "localtion": "否",
        "carSize": "中型SUV",
        "carType": "SUV",
        "name": "孙嘉欣",
        "age": "29",
        "maritalStatus": "已婚",
        "carModel": "奥迪Q5L",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image3
    },
    {
        "period": "60期",
        "orderNo": "B013",
        "educational": "研究生以上",
        "carPrice": "38万元",
        "paymentRatio": "58%",
        "applyMoney": "159600.00元",
        "sex": "女",
        "localtion": "是",
        "carSize": "中型车",
        "carType": "轿车",
        "name": "胡雨婷",
        "age": "32",
        "maritalStatus": "已婚",
        "carModel": "雷克萨斯ES",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image1
    },
    {
        "period": "60期",
        "orderNo": "B014",
        "educational": "初中及以下",
        "carPrice": "40万元",
        "paymentRatio": "67%",
        "applyMoney": "132000.00元",
        "sex": "男",
        "localtion": "否",
        "carSize": "中型SUV",
        "carType": "SUV",
        "name": "朱志豪",
        "age": "32",
        "maritalStatus": "已婚",
        "carModel": "沃尔沃XC60",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image2
    },
    {
        "period": "60期",
        "orderNo": "B015",
        "educational": "大专",
        "carPrice": "15万元",
        "paymentRatio": "44%",
        "applyMoney": "84000.00元",
        "sex": "女",
        "localtion": "否",
        "carSize": "紧凑型SUV",
        "carType": "SUV",
        "name": "高欣怡",
        "age": "35",
        "maritalStatus": "已婚",
        "carModel": "吉利博越",
        "applicaitonTime": "3分44秒",
        "applicaitonTimeNum": 77.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image3
    },
    {
        "period": "60期",
        "orderNo": "B016",
        "educational": "本科",
        "carPrice": "22万元",
        "paymentRatio": "3%",
        "applyMoney": "213400.00元",
        "sex": "男",
        "localtion": "否",
        "carSize": "中型车",
        "carType": "轿车",
        "name": "郭子轩",
        "age": "25",
        "maritalStatus": "已婚",
        "carModel": "日产天籁",
        "applicaitonTime": "4分44秒",
        "applicaitonTimeNum": 87.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image1
    },
    {
        "period": "60期",
        "orderNo": "B017",
        "educational": "中专及高中",
        "carPrice": "25万元",
        "paymentRatio": "24%",
        "applyMoney": "190000.00元",
        "sex": "女",
        "localtion": "否",
        "carSize": "紧凑型SUV",
        "carType": "SUV",
        "name": "曹雨萱",
        "age": "35",
        "maritalStatus": "已婚",
        "carModel": "马自达CX-5",
        "applicaitonTime": "9分44秒",
        "applicaitonTimeNum": 99.9,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "10",
        "pageJumpTimesNum": 88.5,
        "image": image2
    },
    {
        "period": "60期",
        "orderNo": "B018",
        "educational": "研究生以上",
        "carPrice": "30万元",
        "paymentRatio": "47%",
        "applyMoney": "159000.00元",
        "sex": "男",
        "localtion": "否",
        "carSize": "中型SUV",
        "carType": "SUV",
        "name": "许浩然",
        "age": "25",
        "maritalStatus": "已婚",
        "carModel": "福特锐界",
        "applicaitonTime": "7分44秒",
        "applicaitonTimeNum": 99.7,
        "stopTime": "2分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "17m/s",
        "pageSpeedNum": 77.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image3
    },
    {
        "period": "60期",
        "orderNo": "B019",
        "educational": "大专",
        "carPrice": "45万元",
        "paymentRatio": "60%",
        "applyMoney": "180000.00元",
        "sex": "女",
        "localtion": "是",
        "carSize": "跑车",
        "carType": "跑车",
        "name": "韩雪梅",
        "age": "31",
        "maritalStatus": "已婚",
        "carModel": "雪佛兰科迈罗",
        "applicaitonTime": "5分44秒",
        "applicaitonTimeNum": 88.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "2",
        "pageJumpTimesNum": 8.5,
        "image": image1
    },
    {
        "period": "60期",
        "orderNo": "B020",
        "educational": "本科",
        "carPrice": "90万元",
        "paymentRatio": "18%",
        "applyMoney": "738000.00元",
        "sex": "女",
        "localtion": "是",
        "carSize": "跑车",
        "carType": "跑车",
        "name": "冯思琪",
        "age": "27",
        "maritalStatus": "未婚",
        "carModel": "保时捷718",
        "applicaitonTime": "4分44秒",
        "applicaitonTimeNum": 79.7,
        "stopTime": "0分50秒",
        "stopTimeNum": 80.5,
        "pageSpeed": "27m/s",
        "pageSpeedNum": 90.1,
        "pageJumpTimes": "1",
        "pageJumpTimesNum": 6.5,
        "image": image2
    }
])
const data = ref({})
onMounted(() => {
    data.value = allData.value.filter(d => {
        return d.orderNo === query.orderNo
    })[0]
})
</script>
<style scoped lang="scss">
.report {
    display: flex;
    flex-direction: row;
}

.report-right {
    .header {
        margin-top: 120px;
        margin-left: 100px;
        font-size: 16;
        font-weight: bold;
    }

    .echarts-table {
        margin-left: 100px;
    }
}

.report-left {
    width: 50%;
    margin-left: 20px;
    margin-top: 20px;

    .header {
        font-size: 36px;
        /* text-align: center; */
    }

    .el-descriptions {
        margin-top: 40px;

    }

    .annotation {
        color: orange;
    }

    .info-card {
        margin-bottom: 150px;
    }
}
</style>